<template>
  <Layout style="height: 100%" class="main">
    <Sider
      style="height:100%"
      hide-trigger
      collapsible
      :width="200"
      :collapsed-width="64"
      v-model="collapsed"
      class="left-sider"
      :style="{overflow: 'hidden'}"
    >
      <side-menu
        accordion
        ref="sideMenu"
        :active-name="$route.name"
        :collapsed="collapsed"
        @on-select="turnToPage"
        :menu-list="menuList"
        v-if="menuList.length>0"
      >
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div class="logo-con">
          <Tooltip :content="storeName">
            <h1 @click="GoHome">{{storeName}}</h1>
          </Tooltip>
          <!-- <h1 :storeName="storeName"></h1> -->
          <!-- 门店列表弹窗 -->
          <Modal :mask-closable="false" v-model="showModalStoreList" height="600" title="选择机构">
            <div class="content-box">
              <div v-for="(item, index) in storeList" :key="index" :class="item.isSelected?'item-cell-selected':'item-cell'" @click="onClickCell(item)">
                <div class="item">
                  <img src="../../assets/images/check.png" class="item-img" alt="" v-if="item.isSelected" />
                  <span class="item-title">{{ item.storeName }}</span>
                  <Button type="warning" size="small" class="select-btn">选择</Button>
                </div>
              </div>
            </div>
            <div slot="footer">
              <!-- <Button type="primary" @click="okBtn()">确定</Button> -->
            </div>
          </Modal>
        </div>
      </side-menu>
    </Sider>
    <Layout style="height:100%">
      <Header class="header-con">
        <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
          <user :message-unread-count="unreadCount" :user-avator="userAvator"/>
          <language
            v-if="$config.useI18n"
            @on-lang-change="setLocal"
            style="margin-right: 10px;"
            :lang="local"
          />
          <!-- <error-store
            v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader"
            :has-read="hasReadErrorPage"
            :count="errorCount"
          ></error-store>-->
          <fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>
          <span @click="showStoreListModal" style="margin-right: 15px;" v-if="storeList.length>1">
            {{ storeName }}
            <Icon :size="18" type="md-arrow-dropdown" />
          </span>
        </header-bar>
      </Header>
      <Content class="main-content-con">
        <Layout class="main-layout-con">
          <div class="tag-nav-wrapper">
            <tags-nav
              :value="$route"
              @input="handleClick"
              :list="tagNavList"
              @on-close="handleCloseTag"
            />
          </div>
          <Content class="content-wrapper">
            <keep-alive :include="cacheList">
              <router-view/>
            </keep-alive>
            <ABackTop :height="100" :bottom="80" :right="50" container=".content-wrapper"></ABackTop>
          </Content>
        </Layout>
      </Content>
    </Layout>
  </Layout>
</template>
<script>
import SideMenu from "./components/side-menu";
import HeaderBar from "./components/header-bar";
import storage from "@/libs/storage";
import store from '@/store'
import TagsNav from "./components/tags-nav";
import User from "./components/user";
import ABackTop from "./components/a-back-top";
import Fullscreen from "./components/fullscreen";
import Language from "./components/language";
import ErrorStore from "./components/error-store";
import { mapMutations, mapActions, mapGetters } from "vuex";
import { getNewTagList, getNextRoute, routeEqual } from "@/libs/util";
import { createMenuListWithStore, createMenuListWithCompany } from "@/libs/login";
import { loginMenu } from "@/api/loginMenu";
import routers from "@/router/routers";
import minLogo from "@/assets/images/logo-min.jpg";
import maxLogo from "@/assets/images/logo.png";
import "./main.less";
export default {
  name: "Main",
  components: {
    SideMenu,
    HeaderBar,
    Language,
    TagsNav,
    Fullscreen,
    ErrorStore,
    User,
    ABackTop
  },
  data() {
    return {
      showModalStoreList: false, // 弹窗默认隐藏,
      collapsed: false,
      minLogo,
      maxLogo,
      storeName: "",
      storeList: [],
      isFullscreen: false,
      menuList: [],
      Loading: ""
    };
  },
  computed: {
    ...mapGetters(["errorCount"]),
    tagNavList() {
      return this.$store.state.app.tagNavList;
    },
    tagRouter() {
      return this.$store.state.app.tagRouter;
    },
    userAvator() {
      return this.$store.state.user.avatorImgPath;
    },
    cacheList() {
      return [
        "ParentView",
        ...(this.tagNavList.length
          ? this.tagNavList
            .filter(item => !(item.meta && item.meta.notCache))
            .map(item => item.name)
          : [])
      ];
    },
    local() {
      return this.$store.state.app.local;
    },
    hasReadErrorPage() {
      return this.$store.state.app.hasReadErrorPage;
    },
    unreadCount() {
      return this.$store.state.user.unreadCount;
    }
  },
  methods: {
    ...mapMutations([
      "setBreadCrumb",
      "setTagNavList",
      "addTag",
      "setLocal",
      "setHomeRoute"
    ]),
    ...mapActions(["handleLogin", "getUnreadMessageCount", "getMenuList", "switchAccountLoginType"]),
    showStoreListModal() {
      this.showModalStoreList = true;
    },
    onClickCell(item) {
      let userId = item.userId || item.adminUserId || item.id;
      let accountType = item.accountType || this.accountType;

      window.Loading = this.$myLoading({ content: "正在切换账号登录…" });
      this.switchAccountLoginType({ accountType, userId })
        .then(res => {
          const { code, message } = res;
          if (code == 200) {
            this.refreshStoreList(item);

            if (accountType == 'store') {
              this.loginWithStoreType(userId, item, this.data);
            } else {
              this.loginWithCompanyType(userId, item);
            }
          } else {
            this.$Message.error(message);
          }
          window.Loading.close();
          this.showModalStoreList = false;
        },
        reject => {
          window.Loading.close();
          if (reject.message == "Network Error") {
            this.$Message.error({ content: "服务器开小差了~", duration: 2000 });
          } else {
            this.$Message.error(reject.message);
          }
        }
        );
    },
    turnToPage(route) {
      let { name, params, query } = {};
      if (typeof route === "string") name = route;
      else {
        name = route.name;
        params = route.params;
        query = route.query;
      }
      if (name.indexOf("isTurnByHref_") > -1) {
        window.open(name.split("_")[1]);
        return;
      }
      this.$router.push({
        name,
        params,
        query
      });
    },
    GoHome() {
      this.$router.push({
        name: "singlepage"
      });
    },
    handleCollapsedChange(state) {
      this.collapsed = state;
    },
    handleCloseTag(res, type, route) {
      if (type === "all") {
        this.turnToPage(this.$config.homeName);
      } else if (routeEqual(this.$route, route)) {
        if (type !== "others") {
          const nextRoute = getNextRoute(this.tagNavList, route);
          this.$router.push(nextRoute);
        }
      }
      this.setTagNavList(res);
    },
    handleClick(item) {
      this.turnToPage(item);
    },
    firstPush() {
      const newRoute = this.$route;
      this.$refs.sideMenu.updateOpenName(newRoute.name);
      this.setBreadCrumb(newRoute);
    },
    // 设置门店列表数据
    configStoreInfo() {
      let storeInfo = this.$store.state.storeInfo;
      this.storeName = storeInfo.storeName;
      if (storeInfo.storeList.length == 0) {
        let storeListJSON = localStorage.getItem('storeList');
        if (storeListJSON != 'undefined' && storeListJSON != '') {
          storeInfo.storeList = JSON.parse(storeListJSON);
          store.commit('setStoreList', storeInfo.storeList);
        }
      }

      for (let i = 0; i < storeInfo.storeList.length; i++) {
        const item = storeInfo.storeList[i];
        item.isSelected = item.id == storeInfo.storeId;
      }
      this.storeList = storeInfo.storeList;
    },
    // 刷新门店列表
    refreshStoreList(storeInfo) {
      for (let i = 0; i < this.storeList.length; i++) {
        const item = this.storeList[i];
        if (item.isSelected) {
          item.isSelected = false;
        }
      }
      storeInfo.isSelected = true;
    },
    loginWithStoreType(userId, storeInfo) {
      loginMenu().then(res => {
        let storeMenuList = res.data.data;
        createMenuListWithStore(userId, storeInfo, storeMenuList);
        this.tohome();
        this.refresh();
      });
    },
    loginWithCompanyType(userId, storeInfo) {
      createMenuListWithCompany(userId, storeInfo);
      this.tohome();
      this.refresh();
    },
    tohome() {
      this.$router.push({
        name: this.$config.homeName
      });
    },
    refresh() {
      window.location.reload();
    }
  },
  watch: {
    $route(newRoute) {
      const { name, query, params, meta } = newRoute;
      this.addTag({
        route: { name, query, params, meta },
        type: "push"
      });
      this.setBreadCrumb(newRoute);
      this.setTagNavList(getNewTagList(this.tagNavList, newRoute));
      this.$refs.sideMenu.updateOpenName(newRoute.name);
    }
  },
  mounted() {
    /**
     * @description 初始化设置面包屑导航和标签导航
     */
    window.Loading && window.Loading.close();
    // this.Loading = this.$myLoading();
    this.getMenuList();
    this.setTagNavList();
    this.setHomeRoute(routers);
    this.addTag({
      route: this.$store.state.app.homeRoute
    });
    // this.setBreadCrumb(this.$route);
    // 设置初始语言
    this.setLocal(this.$i18n.locale);
    // 如果当前打开页面不在标签栏中，跳到homeName页
    if (!this.tagNavList.find(item => item.name === this.$route.name)) {
      this.$router.push({
        name: this.$config.homeName
      });
    }
    // 获取未读消息条数
    this.getUnreadMessageCount();

    // 设置全局storeInfo
    let storeInfoJSON = localStorage.getItem('storeInfo');
    if (storeInfoJSON && storeInfoJSON != 'undefined') {
      let storeInfo = JSON.parse(storeInfoJSON);
      store.commit('setStoreId', storeInfo.id);
      store.commit('setStoreCode', storeInfo.storeCode);
      store.commit('setStoreName', storeInfo.storeName);
    }

    // 设置全局user
    let userId = localStorage.getItem('userId');
    store.commit('setUserId', userId);

    let menuList = this.$store.state.app.menuList;
    if (menuList == undefined || menuList.length == 0) {
      this.$Message.error('store menuList empty');
      menuList = storage.getStorage('meunList');
    }

    // 门店信息
    this.configStoreInfo();
    this.menuList = menuList;
  }
};
</script>
